<template>
  <div class="GdwyyAppBase">
    <div class="top rel">
      <!-- <div :style="{ opacity: NODE_ENV === 'development' ? 1 : 0 }">
        <van-icon name="arrow-left" @click="handleGoBack" />
      </div> -->
      <!-- <div class="text-center" :style="{ opacity: NODE_ENV === 'development' ? 1 : 0 }">{{ pageTitle }}</div> -->
      <div @click="showDatePopup = true" class="flex-center date-box font-12 abs" v-if="pageType === 'morning'">
        <van-icon name="notes-o" />
        <span class="date">{{ showDate }}</span>
        <van-icon name="arrow" />
      </div>
      <div class="flex-center date-box font-12 abs" v-else>
        <span class="date">数据更新时间：{{ realTime }}</span>
      </div>
    </div>
    <div class="main">
      <div class="fz-main main-container">
        <GdwyyAppBigTitle :time="showTime ? queryParam.dayId : ''" title="发展" color="blue" tips="当日值/目标值">
        </GdwyyAppBigTitle>
        <van-loading v-if="fzLoading" type="spinner" color="#1989fa" />
        <div class="main-container-pd" v-else>
          <div v-for="(item, index) in fzDataConfig" :key="index + 'fzd'">
            <GdwyyAppSmallTitle :title="item.title"></GdwyyAppSmallTitle>
            <div class="flex-center flex-between">
              <div class="left flex-center">
                <img class="icon" :src="require('../../../../../assets/imgs/reconsitution/' + item.icon + '.png')" />
                <div>
                  <div class="font-12 color333">{{ item.title }}</div>
                  <div class="font-20 main-blue" :class="{ 'num-underline': Number(zl[zlModel[item.model]]) > 0 }"
                    @click="handleopenDialog({ item, num: zl[zlModel[item.model]] }, 'zl_fz')">
                    {{ zl[zlModel[item.model]] || 0 }}
                  </div>
                </div>
              </div>
              <div class="right">
                <div class="flex-between mgb-6" v-for="(ite, ind) in item.list" :key="ind + 'li'">
                  <div class="font-13 color333">
                    <img class="ite-icon"
                      :src="require('../../../../../assets/imgs/reconsitution/' + ite.icon + '.png')" />
                    {{ ite.label }}
                  </div>
                  <div class="font-13 main-blue" :class="{ 'num-underline': Number(zl[zlModel[ite.model]]) > 0 }"
                    @click="handleopenDialog({ ite, num: zl[zlModel[ite.model]] }, 'zl_fz')">
                    {{ zl[zlModel[ite.model]] || 0 }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="jf-main main-container">
        <GdwyyAppBigTitle :time="showTime ? queryParam.dayId : ''" title="交付" color="green" icon="交付">
        </GdwyyAppBigTitle>
        <van-loading v-if="fzLoading" type="spinner" color="#1989fa" />
        <div class="main-container-pd" v-else>
          <JfCard :queryParam="queryParam" :pageType="pageType" @openDialog="handleopenDialog($event, 'zl_jf')">
          </JfCard>
        </div>
      </div>

      <div class="zyx-main main-container">
        <GdwyyAppBigTitle :time="showTime ? queryParam.dayId : ''" title="专业线" color="org" icon="专业线">
        </GdwyyAppBigTitle>
        <van-loading v-if="zyxLoading" type="spinner" color="#1989fa" />
        <div class="main-container-pd" v-else>
          <div v-for="(item, index) in zyxDataConfig" :key="index + 'jfl'">
            <GdwyyAppItemCard :showArrow="true" :title="item.title" :list="item.list" color="org"
              :data="{ ...zyx, ...jfData }" @goDetail="handlegoDetail(item, 'zyx')"></GdwyyAppItemCard>
          </div>
        </div>
      </div>

      <div class="zyx-main main-container">
        <GdwyyAppBigTitle :time="showTime ? queryParam.dayId : ''" title="包区" color="red" icon="包区"></GdwyyAppBigTitle>
        <van-loading v-if="bqLoading" type="spinner" color="#1989fa" />
        <div class="main-container-pd" v-else>
          <template v-if="bqList.length">
            <div v-for="(item, index) in bqList" :key="index + 'jfl'">
              <GdwyyAppItemCard :showArrow="true" :title="item.bq_name" :data="item" :list="item.list" color="red"
                :isBq="true" :pageType="pageType" :queryParam="queryParam" @goDetail="handlegoDetail(item, 'bq')">
              </GdwyyAppItemCard>
            </div>
            <div class="show-more font-12" v-if="allBqListLength > bqList.length" @click="handleShowMore">查看更多</div>
          </template>
        </div>

        <div v-if="!bqList.length && !bqLoading" class="no-data-container"></div>
      </div>
    </div>

    <van-popup v-model="showDatePopup" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" title="请选择账期" :loading="isLoadingShow"
        @cancel="showDatePopup = false" @confirm="handleChangeDate" :maxDate="maxDate" />
    </van-popup>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant'
import { GdwyyAppBigTitle, GdwyyAppSmallTitle } from '@/components/reconsitution/index.js'
import JfCard from './components/JfCard.vue'
import {
  _ywsjListV2,
  _kdListV2,
  _zjcpIPTVListV2,
  jfListConfig,
  _zyxBigListV2,
  firstPageApiConfig,
  _lchCallbackData,
} from './common'
import GdwyyAppItemCard from './components/itemCard.vue'
import dateTime from '@/components/common/dateTime.vue'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'
import { showZwtNav } from '@/utils/showNav.js'
import { postAction, sql2apiAction, getAction, uploadAction } from '@api/manage'
import { yrmxDialogUrlConfig } from './common'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
// import Recorder from 'js-audio-recorder'
// import lamejs from 'lamejs'
// import Recorder from 'recorder-js'
const token = Vue.ls.get(ACCESS_TOKEN)
let _bq = []
const zxjJgList = [
  {
    label: '装机竣工',
    icon: 'zjx_zjjg',
    // model: 'ZJ_ZJ_JGL',
    model: 'JF_0003',
  },
  {
    label: '移机竣工',
    icon: 'zjx_yjjg',
    // model: 'ZJ_YJ_JGL',
    model: 'JF_007',
  },
  {
    label: '修机竣工',
    icon: 'zjx_xjjg',
    // model: 'ZJ_XJ_JGL',
    model: 'JF_0011',
  },
]
export default {
  name: 'GdwyyAppBase',
  props: {
    pageType: {
      type: String,
      default: 'morning',
    },
  },
  mixins: [reconsitutionMixin],
  components: { GdwyyAppBigTitle, GdwyyAppSmallTitle, GdwyyAppItemCard, dateTime, JfCard },

  data() {
    return {
      zl: {},
      zyx: {},
      queryParam: {
        gridId: '',
        dayId: '',
      },
      jfData: {},
      zlModel: _lchCallbackData.dataModel,
      fzLoading: false,
      zyxLoading: false,
      bqLoading: false,
      isLoadingShow: false,
      showDatePopup: false,
      currentDate: '',
      bqList: [],
      allBqListLength: false,
      NODE_ENV: '',
      maxDate: null,
      realTime: '',
    }
  },

  computed: {
    showTime() {
      return this.pageType === 'morning'
    },
    showDate() {
      if (!this.queryParam.dayId) return ''
      const year = this.queryParam.dayId.substring(0, 4)
      const month = this.queryParam.dayId.substring(4, 6)
      const day = this.queryParam.dayId.substring(6)
      return `${year}-${month}-${day}`
    },
    pageTitle() {
      const obj = {
        morning: '晨会',
        evening: '夕会',
      }
      return obj[this.pageType] + '看板'
    },
    apiConfig() {
      return firstPageApiConfig[this.pageType]
    },
    fzDataConfig() {
      return [
        {
          title: '移网手机',
          model: 'ywsjtotal',
          icon: 'chkb_ywsj',
          list: this.getListIcon(_ywsjListV2, ['ywzk', '5Gzk', 'f']),
          kpiCode: 'YW_0008',
        },
        {
          title: '宽带',
          model: 'kdtotal',
          icon: 'chkb_kd',
          list: this.getListIcon(_kdListV2, ['kd', 'zqz']),
          kpiCode: 'KD_0008',
        },
        {
          title: '智家产品',
          model: 'zjcptotal',
          icon: 'chkb_kd',
          list: this.getListIcon(_zjcpIPTVListV2, ['wjsy', 'wjzw', 'iptv', 'fttr']),
          kpiCode: 'ZJ_0001',
        },
      ]
    },
    jfDataConfig() {
      return jfListConfig
    },
    zyxDataConfig() {
      const iconList = ['zyx_ywsj', 'zyx_kd', 'zyx_zj']
      return [
        { title: '营业线', list: this.getListIcon(_zyxBigListV2, iconList, 'YY_') },
        { title: '社渠线', list: this.getListIcon(_zyxBigListV2, iconList, 'SQ_') },
        { title: '智家线', list: this.getListIcon(_zyxBigListV2, iconList, 'ZJ_').concat(zxjJgList) },
      ]
    },
  },
  created() {
    showZwtNav(this.pageTitle)
    this.initData()
    this.NODE_ENV = process.env.NODE_ENV
    this.pageType === 'evening' && this.getEveningShowDate()
  },
  mounted() {
    this.queryParam.gridCode = localStorage.getItem('$gridId')
    localStorage.setItem('goDetailType', this.pageType)
  },
  methods: {
    async getEveningShowDate() {
      const res = await postAction('/Sql2ApiCall/call/8a31cdd68b28dfb0018b33970b460002', { '': undefined })
      const jsonRes = JSON.parse(res.result)
      this.realTime = jsonRes.data[0].max_date
    },
    handlegoDetail(item, type) {
      const { title, bq_id } = item
      const obj = {
        营业线: ['yyx', 1],
        社渠线: ['sqx', 2],
        智家线: ['zjx', 3],
      }
      const queryParam = this.queryParam
      type === 'zyx' && (queryParam.chnIType = obj[title][1])
      type === 'bq' && (queryParam.bqId = bq_id)
      const query = {
        pageTitle: title, //页面标题
        pageType: this.pageType, // 晨夕会类型
        type: type === 'zyx' ? obj[title][0] : type, // 跳转详情类型
        queryParam: JSON.stringify(queryParam), // 查询参数
      }
      localStorage.setItem('goDetailType', this.pageType)
      this.$open.call(this, '/publicline/morningEvening/detail', query)
    },
    handleChangeDate(val) {
      let res = new Date(val).toLocaleDateString()
      res = res
        .split('/')
        .map((it) => it.padStart(2, '0'))
        .join('')
      this.queryParam.dayId = res
      this.setAllRequest(this.apiConfig, this.queryParam)
      this.loadJfData()
      this.showDatePopup = false
    },
    loadJfData() {
      const params = {
        ...this.queryParam,
      }
      let url = ''
      if (this.pageType == 'morning') url = '2c3a07178ba92724018bb9eab5bc0006'
      if (this.pageType == 'evening') url = '2c3a07178ba92724018bc78b84db000c'
      sql2apiAction(url, params).then((res) => {
        const data = res.result
        this.jfData = data[0] || {}
      })
    },
    getBqItemList() {
      const iconList = ['bq_ywsj', 'bq_kd', 'bq_zj', 'zjx_zjjg', 'zjx_yjjg', 'zjx_xjjg']
      const list = [
        '移网手机,YW_SJ_FZ',
        '宽带,KD_FZ',
        'FTTR,FTTR_FZ',
        '装机竣工,JF_0003',
        '移机竣工,JF_0007',
        '修机竣工,JF_0011',
      ]
      return list.map((item, index) => {
        const currentItem = item.split(',')
        return {
          label: currentItem[0],
          model: currentItem[1],
          icon: iconList[index],
        }
      })
    },
    getListIcon(data, iconList = [], targetModel = '') {
      return data.map((item, index) => {
        const obj = {
          ...item,
          icon: iconList[index],
        }
        targetModel && (obj.model = targetModel + item.model)
        return obj
      })
    },
    initDataPostHook(data) {
      this.setAllRequest(this.apiConfig, this.queryParam)
      this.loadJfData()
      this.maxDate = this.currentDate = this.filterDate(this.queryParam.dayId)
    },
    filterDate(datestr) {
      if (!datestr) return ''
      const year = datestr.substring(0, 4)
      const month = datestr.substring(4, 6)
      const day = datestr.substring(6)
      const date = `${year}/${month}/${day}`
      return new Date(date)
    },
    bqHooks(data) {
      // 缓存
      _bq = data
      this.allBqListLength = data.length
      this.bqList = []
      this.handleShowMore()
    },
    handleShowMore() {
      let res = _bq.splice(0, 3)
      const list = this.getBqItemList()
      res = res.map((item, index) => {
        return {
          ...item,
          title: item.bq_name,
          list,
        }
      })
      this.bqList.push(...res)
    },
    handleGoBack() {
      this.$router.push({ path: '/publicline/index' })
    },
    handleopenDialog(item, panelType) {
      if (!Number(item.num)) return
      this.$open('/publicline/morningEvening/indicatorDetails', {
        url: yrmxDialogUrlConfig[this.pageType][panelType],
        queryParams: JSON.stringify({ ...this.queryParam, kpiCode: item.kpiCode }),
        type: panelType,
        tabUrl: yrmxDialogUrlConfig[this.pageType][panelType + '_tab'],
      })
      localStorage.setItem('goDetailType', this.pageType)
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';

.GdwyyAppBase {
  .num-underline {
    text-decoration: underline;
  }

  .top {
    background-image: linear-gradient(134deg, #80d9f9 0%, #5466fa 100%);
    width: 100%;
    height: 11.7333vw;
    line-height: 11.7333vw;
    padding: 0 4vw;
    color: #fff;
    font-size: 4.5333vw;
    box-sizing: border-box;

    // display: grid;
    // grid-template-columns: repeat(3, 1fr);
    .date-box {
      justify-self: flex-end;
      right: 4vw;
    }

    .date {
      margin: 0 1.0667vw;
    }
  }

  .show-more {
    margin-top: 2.6667vw;
    text-align: center;
  }

  .main {
    padding: 2.1333vw 2.1333vw 4vw 2.1333vw;
    background: #f3f7fa;
  }

  .main-container {
    background: #ffffff;
    border-radius: 1.6vw;
    box-sizing: border-box;
    margin-bottom: 4vw;

    &-pd {
      padding: 0 2.6667vw 2.6667vw 2.6667vw;
    }
  }

  .action-sheet-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }

  .action-sheet-content {
    padding-top: 20px;
    /* 调整内容的顶部间距 */
  }

  .fz-main {
    .icon {
      width: 10.6667vw;
      height: 10.6667vw;
      margin-right: 2.1333vw;
    }

    .left {
      width: 46%;
    }

    .right {
      width: 54%;

      .mgb-6 {
        margin-bottom: 1.6vw;
      }

      .ite-icon {
        width: 3.7333vw;
        height: 3.7333vw;
        margin-right: 1.6vw;
      }
    }
  }
}

.disabled-icon {
  opacity: 0.5;
  pointer-events: none;
}
</style>